<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站设置 - 管理系统</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        /* 全局样式 */
        body {
            background-color: #2d2d2d;
            color: #eee;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        
        /* 通用设置样式 */
        .settings-section {
            background-color: #1a1a1a;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .settings-header {
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .settings-title {
            margin: 0;
            font-size: 1.5rem;
            color: #4ef2f8;
            text-shadow: 0 0 10px rgba(78, 242, 248, 0.3);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #eee;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: #fff;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.15s ease-in-out;
        }
        
        .form-control:focus {
            border-color: #4ef2f8;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(78, 242, 248, 0.25);
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            border: none;
            font-size: 16px;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #4ef2f8, #4285f4);
            color: white;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #45d6db, #3b78e7);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(78, 242, 248, 0.2);
        }
        
        .btn-danger {
            background-color: #dc3545;
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #c82333;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(220, 53, 69, 0.2);
        }
        
        .bg-preview {
            width: 100%;
            max-width: 600px;
            height: 200px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 8px;
            margin-bottom: 15px;
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            background-color: #333;
        }
        
        .settings-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .settings-table th,
        .settings-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .settings-table th {
            background-color: #222;
            font-weight: bold;
            color: #4ef2f8;
        }
        
        .settings-table tr:hover {
            background-color: #333;
        }
        
        .actions {
            display: flex;
            gap: 10px;
        }
        
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .alert-success {
            background-color: rgba(40, 167, 69, 0.2);
            color: #75e48e;
            border: 1px solid rgba(40, 167, 69, 0.3);
        }
        
        .alert-danger {
            background-color: rgba(220, 53, 69, 0.2);
            color: #ff8c9a;
            border: 1px solid rgba(220, 53, 69, 0.3);
        }
        
        /* 侧边栏样式 */
        .sidebar {
            background-color: #222;
            border-right: 1px solid rgba(255,255,255,0.1);
        }
        
        .sidebar-header h2 {
            color: #4ef2f8;
        }
        
        .sidebar-menu li a {
            color: #eee;
        }
        
        .sidebar-menu li a:hover,
        .sidebar-menu li.active a {
            background-color: rgba(78, 242, 248, 0.1);
            color: #4ef2f8;
        }
        
        /* 主内容区样式 */
        .main-content {
            background-color: #2d2d2d;
        }
        
        .dashboard-header {
            background-color: rgba(0,0,0,0.2);
        }
        
        .dashboard-title h1 {
            color: #4ef2f8;
            text-shadow: 0 0 10px rgba(78, 242, 248, 0.3);
        }
        
        /* 文件上传按钮 */
        input[type="file"] {
            background-color: #333;
            color: #eee;
            border: 1px solid rgba(255,255,255,0.2);
            padding: 8px;
        }
        
        /* 小提示文字 */
        small {
            color: #aaa;
        }
        
        .opacity-slider {
            height: 10px;
            background: linear-gradient(to right, rgba(78, 242, 248, 0.2), rgba(78, 242, 248, 0.8));
            border-radius: 5px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }
        
        .opacity-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
            box-shadow: 0 0 10px rgba(78, 242, 248, 0.5);
        }
        
        .opacity-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
            box-shadow: 0 0 10px rgba(78, 242, 248, 0.5);
        }
        
        .opacity-preview {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        .opacity-preview h4 {
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .preview-box {
            width: 100%;
            height: 200px;
            border-radius: 8px;
            position: relative;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .preview-content {
            position: relative;
            z-index: 1;
            padding: 20px;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }
        
        .preview-content h3 {
            color: var(--primary-color);
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>控制面板</h2>
            </div>
            <ul class="sidebar-menu">
                <li><a href="/dashboard">主页</a></li>
                <li><a href="/dashboard/profile">个人信息</a></li>
                <li><a href="/dashboard/change-password">修改密码</a></li>
                <li><a href="/dashboard/documents">文档管理</a></li>
                <li><a href="/dashboard/categories">分类管理</a></li>
                <li><a href="/dashboard/weblinks">网站链接管理</a></li>
                <li><a href="/dashboard/users">用户管理</a></li>
                <li class="active"><a href="/dashboard/settings">网站设置</a></li>
                <li><a href="/danmaku-display">弹幕墙</a></li>
                <li><a href="/weblinks" target="_blank">网站导航</a></li>
                <li><a href="/" target="_blank">访问首页</a></li>
                <li><a href="/logout">退出登录</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="dashboard-header">
                <div class="dashboard-title">
                    <h1>网站设置</h1>
                </div>
            </div>
            
            <!-- 提示消息 -->
            <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
            <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>
            
            <!-- 网站导航背景图片设置 -->
            <div class="settings-section">
                <div class="settings-header">
                    <h2 class="settings-title">网站导航背景图片</h2>
                </div>
                
                <!-- 预览当前背景 -->
                <div class="bg-preview" th:style="${weblinksBackground != '' ? 'background-image: url(' + weblinksBackground + ')' : ''}">
                    <span th:if="${weblinksBackground == ''}">暂无背景图片</span>
                </div>
                
                <form action="/dashboard/settings/update-weblinks-background" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="backgroundFile">选择新背景图片</label>
                        <input type="file" id="backgroundFile" name="backgroundFile" class="form-control" accept="image/jpeg,image/png,image/jpg" required>
                        <small>支持格式: JPG, JPEG, PNG，建议尺寸: 1920x1080 像素，最大文件大小: 20MB</small>
                    </div>
                    
                    <!-- 增加上传状态和帮助信息 -->
                    <div class="upload-status" style="margin-bottom: 15px; color: #4ef2f8;">
                        <p>如果上传失败，请尝试以下方法：</p>
                        <ul>
                            <li>确保图片小于20MB</li>
                            <li>使用JPG或PNG格式</li>
                            <li>压缩图片后再上传</li>
                            <li>清除浏览器缓存后重试</li>
                        </ul>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">上传背景图片</button>
                        <a href="/dashboard/settings/reset-weblinks-background" class="btn btn-danger" onclick="return confirm('确定要重置背景图片吗？')">重置背景图片</a>
                    </div>
                </form>
                
                <!-- 背景图片透明度设置 -->
                <div class="form-group" th:if="${weblinksBackground != ''}">
                    <div class="settings-header">
                        <h3 class="settings-title">背景图片透明度设置</h3>
                    </div>
                    
                    <form action="/dashboard/settings/update-background-opacity" method="post">
                        <div class="form-group">
                            <label for="backgroundOpacity">透明度控制 <span id="opacityValue" th:text="${backgroundOpacity ?: '0.5'}">0.5</span></label>
                            <input type="range" id="backgroundOpacity" name="backgroundOpacity" class="form-control opacity-slider" 
                                   min="0" max="1" step="0.1" th:value="${backgroundOpacity ?: '0.5'}">
                            <small>向左滑动增加透明度，向右滑动减少透明度</small>
                        </div>
                        
                        <!-- 网站导航背景透明度预览 -->
                        <div class="opacity-preview">
                            <h4>效果预览</h4>
                            <div class="preview-box" th:style="${weblinksBackground != '' ? 'background-image: url(' + weblinksBackground + ')' : ''}">
                                <div class="overlay" id="weblinksOverlay" th:style="'background-color: rgba(0,0,0,' + (${backgroundOpacity != null} ? ${backgroundOpacity} : '0.5') + ')'"></div>
                                <div class="preview-content">
                                    <p>这是网站导航的内容示例</p>
                                    <h3>示例网站链接</h3>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">保存透明度设置</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 主页背景图片设置 -->
            <div class="settings-section">
                <div class="settings-header">
                    <h2 class="settings-title">主页背景图片</h2>
                </div>
                
                <!-- 预览当前背景 -->
                <div class="bg-preview" th:style="${homeBackground != '' ? 'background-image: url(' + homeBackground + ')' : ''}">
                    <span th:if="${homeBackground == ''}">暂无背景图片</span>
                </div>
                
                <form action="/dashboard/settings/update-home-background" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="homeBackgroundFile">选择新背景图片</label>
                        <input type="file" id="homeBackgroundFile" name="backgroundFile" class="form-control" accept="image/jpeg,image/png,image/jpg" required>
                        <small>支持格式: JPG, JPEG, PNG，建议尺寸: 1920x1080 像素，最大文件大小: 20MB</small>
                    </div>
                    
                    <!-- 增加上传状态和帮助信息 -->
                    <div class="upload-status" style="margin-bottom: 15px; color: #4ef2f8;">
                        <p>如果上传失败，请尝试以下方法：</p>
                        <ul>
                            <li>确保图片小于20MB</li>
                            <li>使用JPG或PNG格式</li>
                            <li>压缩图片后再上传</li>
                            <li>清除浏览器缓存后重试</li>
                        </ul>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">上传背景图片</button>
                        <a href="/dashboard/settings/reset-home-background" class="btn btn-danger" onclick="return confirm('确定要重置背景图片吗？')">重置背景图片</a>
                    </div>
                </form>
                
                <!-- 背景图片透明度设置 -->
                <div class="form-group" th:if="${homeBackground != ''}">
                    <div class="settings-header">
                        <h3 class="settings-title">背景图片透明度设置</h3>
                    </div>
                    
                    <form action="/dashboard/settings/update-home-background-opacity" method="post">
                        <div class="form-group">
                            <label for="homeBackgroundOpacity">透明度控制 <span id="homeOpacityValue" th:text="${homeBackgroundOpacity ?: '0.5'}">0.5</span></label>
                            <input type="range" id="homeBackgroundOpacity" name="backgroundOpacity" class="form-control opacity-slider" 
                                   min="0" max="1" step="0.1" th:value="${homeBackgroundOpacity ?: '0.5'}">
                            <small>向左滑动增加透明度，向右滑动减少透明度</small>
                        </div>
                        
                        <!-- 主页背景透明度预览 -->
                        <div class="opacity-preview">
                            <h4>效果预览</h4>
                            <div class="preview-box" th:style="${homeBackground != '' ? 'background-image: url(' + homeBackground + ')' : ''}">
                                <div class="overlay" id="homeOverlay" th:style="'background-color: rgba(0,0,0,' + (${homeBackgroundOpacity != null} ? ${homeBackgroundOpacity} : '0.5') + ')'"></div>
                                <div class="preview-content">
                                    <p>这是主页的内容示例</p>
                                    <h3>欢迎使用文档管理系统</h3>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">保存透明度设置</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 弹幕墙背景图片设置 -->
            <div class="settings-section">
                <div class="settings-header">
                    <h2 class="settings-title">弹幕墙背景图片</h2>
                </div>
                
                <!-- 预览当前背景 -->
                <div class="bg-preview" th:style="${danmakuBackground != '' ? 'background-image: url(' + danmakuBackground + ')' : ''}">
                    <span th:if="${danmakuBackground == ''}">暂无背景图片</span>
                </div>
                
                <form action="/dashboard/settings/update-danmaku-background" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="danmakuBackgroundFile">选择新背景图片</label>
                        <input type="file" id="danmakuBackgroundFile" name="backgroundFile" class="form-control" accept="image/jpeg,image/png,image/jpg" required>
                        <small>支持格式: JPG, JPEG, PNG，建议尺寸: 1920x1080 像素，最大文件大小: 20MB</small>
                    </div>
                    
                    <!-- 增加上传状态和帮助信息 -->
                    <div class="upload-status" style="margin-bottom: 15px; color: #4ef2f8;">
                        <p>如果上传失败，请尝试以下方法：</p>
                        <ul>
                            <li>确保图片小于20MB</li>
                            <li>使用JPG或PNG格式</li>
                            <li>压缩图片后再上传</li>
                            <li>清除浏览器缓存后重试</li>
                        </ul>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">上传背景图片</button>
                        <a href="/dashboard/settings/reset-danmaku-background" class="btn btn-danger" onclick="return confirm('确定要重置背景图片吗？')">重置背景图片</a>
                    </div>
                </form>
                
                <!-- 背景图片透明度设置 -->
                <div class="form-group" th:if="${danmakuBackground != ''}">
                    <div class="settings-header">
                        <h3 class="settings-title">背景图片透明度设置</h3>
                    </div>
                    
                    <form action="/dashboard/settings/update-danmaku-background-opacity" method="post">
                        <div class="form-group">
                            <label for="danmakuBackgroundOpacity">透明度控制 <span id="danmakuOpacityValue" th:text="${danmakuBackgroundOpacity ?: '0.5'}">0.5</span></label>
                            <input type="range" id="danmakuBackgroundOpacity" name="backgroundOpacity" class="form-control opacity-slider" 
                                   min="0" max="1" step="0.1" th:value="${danmakuBackgroundOpacity ?: '0.5'}">
                            <small>向左滑动增加透明度，向右滑动减少透明度</small>
                        </div>
                        
                        <div class="opacity-preview">
                            <h4>效果预览</h4>
                            <div class="preview-box" th:style="${danmakuBackground != '' ? 'background-image: url(' + danmakuBackground + ')' : ''}">
                                <div class="overlay" id="danmakuOverlay" th:style="'background-color: rgba(0,0,0,' + (${danmakuBackgroundOpacity != null} ? ${danmakuBackgroundOpacity} : '0.5') + ')'"></div>
                                <div class="preview-content">
                                    <p>这是弹幕墙的内容示例</p>
                                    <h3>科技感弹幕效果</h3>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">保存透明度设置</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 聊天室背景图片设置 -->
            <div class="settings-section">
                <div class="settings-header">
                    <h2 class="settings-title">聊天室背景图片</h2>
                </div>
                
                <!-- 预览当前背景 -->
                <div class="bg-preview" th:style="${chatRoomBackground != '' ? 'background-image: url(' + chatRoomBackground + ')' : ''}">
                    <span th:if="${chatRoomBackground == ''}">暂无背景图片</span>
                </div>
                
                <form action="/dashboard/settings/update-chatroom-background" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="chatRoomBackgroundFile">选择新背景图片</label>
                        <input type="file" id="chatRoomBackgroundFile" name="backgroundFile" class="form-control" accept="image/jpeg,image/png,image/jpg" required>
                        <small>支持格式: JPG, JPEG, PNG，建议尺寸: 1920x1080 像素，最大文件大小: 20MB</small>
                    </div>
                    
                    <!-- 增加上传状态和帮助信息 -->
                    <div class="upload-status" style="margin-bottom: 15px; color: #4ef2f8;">
                        <p>如果上传失败，请尝试以下方法：</p>
                        <ul>
                            <li>确保图片小于20MB</li>
                            <li>使用JPG或PNG格式</li>
                            <li>压缩图片后再上传</li>
                            <li>清除浏览器缓存后重试</li>
                        </ul>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">上传背景图片</button>
                        <a href="/dashboard/settings/reset-chatroom-background" class="btn btn-danger" onclick="return confirm('确定要重置背景图片吗？')">重置背景图片</a>
                    </div>
                </form>
                
                <!-- 背景图片透明度设置 -->
                <div class="form-group" th:if="${chatRoomBackground != ''}">
                    <div class="settings-header">
                        <h3 class="settings-title">背景图片透明度设置</h3>
                    </div>
                    
                    <form action="/dashboard/settings/update-chatroom-background-opacity" method="post">
                        <div class="form-group">
                            <label for="chatRoomBackgroundOpacity">透明度控制 <span id="chatRoomOpacityValue" th:text="${chatRoomBackgroundOpacity ?: '0.5'}">0.5</span></label>
                            <input type="range" id="chatRoomBackgroundOpacity" name="backgroundOpacity" class="form-control opacity-slider" 
                                   min="0" max="1" step="0.1" th:value="${chatRoomBackgroundOpacity ?: '0.5'}">
                            <small>向左滑动增加透明度，向右滑动减少透明度</small>
                        </div>
                        
                        <!-- 聊天室背景透明度预览 -->
                        <div class="opacity-preview">
                            <h4>效果预览</h4>
                            <div class="preview-box" th:style="${chatRoomBackground != '' ? 'background-image: url(' + chatRoomBackground + ')' : ''}">
                                <div class="overlay" id="chatRoomOverlay" th:style="'background-color: rgba(0,0,0,' + (${chatRoomBackgroundOpacity != null} ? ${chatRoomBackgroundOpacity} : '0.5') + ')'"></div>
                                <div class="preview-content">
                                    <p>这是聊天室的内容示例</p>
                                    <h3>用户聊天消息</h3>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">保存透明度设置</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- AI助手背景图片设置 -->
            <div class="settings-section">
                <div class="settings-header">
                    <h2 class="settings-title">AI助手背景图片</h2>
                </div>
                
                <!-- 预览当前背景 -->
                <div class="bg-preview" th:style="${aiAssistantBackground != '' ? 'background-image: url(' + aiAssistantBackground + ')' : ''}">
                    <span th:if="${aiAssistantBackground == ''}">暂无背景图片</span>
                </div>
                
                <form action="/dashboard/settings/update-ai-assistant-background" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="aiAssistantBackgroundFile">选择新背景图片</label>
                        <input type="file" id="aiAssistantBackgroundFile" name="backgroundFile" class="form-control" accept="image/jpeg,image/png,image/jpg" required>
                        <small>支持格式: JPG, JPEG, PNG，建议尺寸: 1920x1080 像素，最大文件大小: 20MB</small>
                    </div>
                    
                    <!-- 增加上传状态和帮助信息 -->
                    <div class="upload-status" style="margin-bottom: 15px; color: #4ef2f8;">
                        <p>如果上传失败，请尝试以下方法：</p>
                        <ul>
                            <li>确保图片小于20MB</li>
                            <li>使用JPG或PNG格式</li>
                            <li>压缩图片后再上传</li>
                            <li>清除浏览器缓存后重试</li>
                        </ul>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">上传背景图片</button>
                        <a href="/dashboard/settings/reset-ai-assistant-background" class="btn btn-danger" onclick="return confirm('确定要重置背景图片吗？')">重置背景图片</a>
                    </div>
                </form>
                
                <!-- 背景图片透明度设置 -->
                <div class="form-group" th:if="${aiAssistantBackground != ''}">
                    <div class="settings-header">
                        <h3 class="settings-title">背景图片透明度设置</h3>
                    </div>
                    
                    <form action="/dashboard/settings/update-ai-assistant-background-opacity" method="post">
                        <div class="form-group">
                            <label for="aiAssistantBackgroundOpacity">透明度控制 <span id="aiAssistantOpacityValue" th:text="${aiAssistantBackgroundOpacity ?: '0.95'}">0.95</span></label>
                            <input type="range" id="aiAssistantBackgroundOpacity" name="backgroundOpacity" class="form-control opacity-slider" 
                                   min="0" max="1" step="0.05" th:value="${aiAssistantBackgroundOpacity ?: '0.95'}">
                            <small>向左滑动增加透明度，向右滑动减少透明度</small>
                        </div>
                        
                        <!-- AI助手背景透明度预览 -->
                        <div class="opacity-preview">
                            <h4>效果预览</h4>
                            <div class="preview-box" th:style="${aiAssistantBackground != '' ? 'background-image: url(' + aiAssistantBackground + ')' : ''}" style="background-color: #1e1e1e;">
                                <div class="overlay" id="aiAssistantOverlay" th:style="'background-color: rgba(30, 30, 30,' + (${aiAssistantBackgroundOpacity != null} ? ${aiAssistantBackgroundOpacity} : '0.95') + ')'"></div>
                                <div class="preview-content" style="color: #e0e0e0;">
                                    <p>这是AI助手界面的内容示例</p>
                                    <h3 style="color: #4d78cc;">DeepSeek AI智能助手</h3>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">保存透明度设置</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 其他设置列表 -->
            <div class="settings-section">
                <div class="settings-header">
                    <h2 class="settings-title">所有设置</h2>
                </div>
                
                <table class="settings-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>键</th>
                            <th>值</th>
                            <th>描述</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="setting : ${settings}">
                            <td th:text="${setting.id}">1</td>
                            <td th:text="${setting.settingKey}">site.title</td>
                            <td th:text="${setting.settingValue}">网站标题</td>
                            <td th:text="${setting.description}">网站标题</td>
                            <td th:text="${#temporals.format(setting.updatedAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</td>
                            <td class="actions">
                                <a th:href="@{'/dashboard/settings/delete/' + ${setting.id}}" class="btn btn-danger btn-sm"
                                   onclick="return confirm('确定要删除这个设置吗？')">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <!-- 如果没有设置 -->
                <div th:if="${settings == null || settings.isEmpty()}" style="text-align: center; padding: 20px;">
                    <p>暂无设置。</p>
                </div>
            </div>
            
            <!-- 添加新设置 -->
            <div class="settings-section">
                <div class="settings-header">
                    <h2 class="settings-title">添加/编辑设置</h2>
                </div>
                
                <form action="/dashboard/settings" method="post">
                    <input type="hidden" name="id" th:value="${setting.id}">
                    
                    <div class="form-group">
                        <label for="settingKey">设置键</label>
                        <input type="text" id="settingKey" name="settingKey" class="form-control" th:value="${setting.settingKey}" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="settingValue">设置值</label>
                        <textarea id="settingValue" name="settingValue" class="form-control" rows="3" th:text="${setting.settingValue}"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="description">描述</label>
                        <input type="text" id="description" name="description" class="form-control" th:value="${setting.description}">
                    </div>
                    
                    <button type="submit" class="btn btn-primary">保存设置</button>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 所有滑块统一处理函数
            function setupOpacitySlider(sliderId, valueId, overlayId) {
                const slider = document.getElementById(sliderId);
                const value = document.getElementById(valueId);
                const overlay = document.getElementById(overlayId);
                
                if (slider && value && overlay) {
                    slider.addEventListener('input', function() {
                        value.textContent = this.value;
                        overlay.style.backgroundColor = `rgba(0,0,0,${this.value})`;
                    });
                }
            }
            
            // 设置各个滑块
            setupOpacitySlider('backgroundOpacity', 'opacityValue', 'weblinksOverlay');
            setupOpacitySlider('homeBackgroundOpacity', 'homeOpacityValue', 'homeOverlay');
            setupOpacitySlider('danmakuBackgroundOpacity', 'danmakuOpacityValue', 'danmakuOverlay');
            setupOpacitySlider('chatRoomBackgroundOpacity', 'chatRoomOpacityValue', 'chatRoomOverlay');
            
            // AI助手背景透明度控制
            const aiAssistantOpacitySlider = document.getElementById('aiAssistantBackgroundOpacity');
            if (aiAssistantOpacitySlider) {
                aiAssistantOpacitySlider.addEventListener('input', function() {
                    const value = this.value;
                    document.getElementById('aiAssistantOpacityValue').textContent = value;
                    document.getElementById('aiAssistantOverlay').style.backgroundColor = `rgba(30,30,30,${value})`;
                });
            }
        });
    </script>
</body>
</html> 